<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>RoboCar</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
    <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
    <script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <script src="js/index.js"></script>
    <link rel="stylesheet" href="css/index.css">
</head>
<body>
<nav class="navbar navbar-default" role="navigation">
    <div class="container-fluid">
        <div class="navbar-header">
            <button type="button" class="navbar-toggle" data-toggle="collapse"
                    data-target="#example-navbar-collapse">
                <span class="sr-only">切换导航</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <a class="navbar-brand" href="index.html">控制面板</a>
        </div>
        <div class="collapse navbar-collapse" id="example-navbar-collapse">
            <ul class="nav navbar-nav">
                <li class="active"><a href="state.html">系统状态</a></li>
            </ul>
        </div>
    </div>
</nav>
<div class="content">
    <div class="panel panel-default">
        <div class="panel-heading">
            <h3 class="panel-title">
                运动控制
            </h3>
        </div>
        <div class="panel-body">
            <div class="col-md-6">
                <p id="image_title">图像标题</p>
                <img id="image_stream" src="https://static.runoob.com/images/mix/img_avatar.png" width="100%" height="100%">
            </div>
            <div class="col-md-6">
                <div class="row">
                    <div class="col-md-4 col-sm-4 col-xs-4">
                        <div id="button_ac" class="bs-example">
                            <button onclick="button_ac_click()" type="button" class="btn btn-primary controller_button"
                                    data-loading-text="Loading...">左旋
                            </button>
                        </div>
                    </div>
                    <div class="col-md-4 col-sm-4 col-xs-4">
                        <div id="button_front" class="bs-example ">
                            <button onclick="button_front_click()" type="button"
                                    class="btn btn-primary controller_button"
                                    data-loading-text="Loading...">前进
                            </button>
                        </div>
                    </div>
                    <div class="col-md-4 col-sm-4 col-xs-4">
                        <div id="button_cw" class="bs-example">
                            <button onclick="button_cw_click()" type="button" class="btn btn-primary controller_button"
                                    data-loading-text="Loading...">右旋
                            </button>
                        </div>
                    </div>
                </div>
                <div class="row">
                    <div class="col-md-4 col-sm-4 col-xs-4">
                        <div id="button_left" class="bs-example ">
                            <button onclick="button_left_click()" type="button"
                                    class="btn btn-primary controller_button"
                                    data-loading-text="Loading...">左转
                            </button>
                        </div>
                    </div>
                    <div class="col-md-4 col-sm-4 col-xs-4">
                        <div id="button_stop" class="bs-example ">
                            <button onclick="button_stop_click()" type="button"
                                    class="btn btn-primary controller_button"
                                    data-loading-text="Loading...">停止
                            </button>
                        </div>
                    </div>
                    <div class="col-md-4 col-sm-4 col-xs-4">
                        <div id="button_right" class="bs-example">
                            <button onclick="button_right_click()" type="button"
                                    class="btn btn-primary controller_button"
                                    data-loading-text="Loading...">右转
                            </button>
                        </div>
                    </div>
                </div>
                <div class="row">
                    <div class="col-md-4 col-sm-4 col-xs-4">
                        <div id="button_follow" class="bs-example ">
                            <button onclick="button_follow_click()" type="button"
                                    class="btn btn-primary controller_button"
                                    data-loading-text="Loading...">跟随
                            </button>
                        </div>
                    </div>
                    <div class="col-md-4 col-sm-4 col-xs-4">
                        <div id="button_line" class="bs-example ">
                            <button onclick="button_back_click()" type="button"
                                    class="btn btn-primary controller_button"
                                    data-loading-text="Loading...">后退
                            </button>
                        </div>
                    </div>
                    <div class="col-md-4 col-sm-4 col-xs-4">
                        <div id="button_control" class="bs-example">
                            <button onclick="button_control_click()" type="button"
                                    class="btn btn-primary controller_button"
                                    data-loading-text="Loading...">遥控
                            </button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<script>
    setInterval("video()", 200);

    function video() {
        $.ajax({
            url: '/video',
            async: true,
            dataType: "html",
            type: 'get',
            success: function (data) {
                $('#image_stream').attr("src","data:image/png;base64,"+data);
            }
        })
    }
</script>
</body>
</html>